<template>
	<view class="container">
		<!-- 加载中状态 -->
		<view class="loading-container" v-if="isLoading">
			<image class="loading-image" src="/static/images/loading.png" mode="aspectFit"></image>
			<text class="loading-text">正在加载景点信息...</text>
		</view>

		<!-- 错误状态 -->
		<view class="error-container" v-else-if="hasError">
			<image class="error-image" src="/static/images/error.png" mode="aspectFit"></image>
			<text class="error-text">{{errorMsg || '加载失败'}}</text>
			<button class="retry-button" @click="retryLoading">重新加载</button>
		</view>

		<!-- 景点详情内容 -->
		<block v-else-if="attraction">
			<!-- 头部图片 -->
			<view class="header-image">
				<image :src="attraction.coverImage || (attraction.images && attraction.images.length > 0 ? attraction.images[0].url : '')" mode="aspectFill"></image>
			</view>

			<!-- 基本信息 -->
			<view class="basic-info">
				<text class="title">{{attraction.name}}</text>
				
				<!-- 标签 -->
				<view class="tags">
					<text class="tag" v-for="(item, index) in attraction.tags" :key="index">{{item}}</text>
				</view>
				
				<!-- 评分 -->
				<view class="rating">
					<view class="stars">
						<image 
							v-for="n in 5" 
							:key="n"
							:src="getStarImage(n)" 
							class="star-icon">
						</image>
					</view>
					<text class="rating-text">{{attraction.rating || '暂无评分'}}</text>
					<text class="visit-count">{{attraction.visitCount || 0}}人去过</text>
				</view>
			</view>

			<!-- 地址和时间 -->
			<view class="info-row" @click="openLocation">
				<text class="info-label">地址</text>
				<text class="info-content">{{attraction.address}}</text>
				<image class="location-icon" src="/static/images/location.png" mode="aspectFit"></image>
			</view>

			<view class="info-row">
				<text class="info-label">开放时间</text>
				<text class="info-content">{{attraction.openTime || '全天开放'}}</text>
			</view>

			<view class="info-row" v-if="attraction.price">
				<text class="info-label">门票</text>
				<text class="info-content">{{attraction.price}}</text>
			</view>
			
			<!-- 操作按钮 -->
			<view class="action-row">
				<view class="action-button" :class="{'liked': isLiked}" @click="toggleLike">
					<image :src="isLiked ? '/static/images/like-filled.png' : '/static/images/like.png'" mode="aspectFit"></image>
					<text>{{isLiked ? '已点赞' : '点赞'}} ({{attraction.likeCount || 0}})</text>
				</view>
				
				<button class="action-button share" open-type="share">
					<image src="/static/images/share.png" mode="aspectFit"></image>
					<text>分享</text>
				</button>
			</view>
			
			<!-- 景点描述 -->
			<view class="section">
				<text class="section-title">景点介绍</text>
				<text class="description">{{attraction.description}}</text>
			</view>
			
			<!-- 图片展示 -->
			<view class="section" v-if="attraction.images && attraction.images.length > 0">
				<text class="section-title">景点图片</text>
				<view class="image-gallery">
					<view class="gallery-item" 
						  v-for="(item, index) in attraction.images" 
						  :key="item.id || index" 
						  @click="previewImage(item.url)">
						<image :src="item.url" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			
			<!-- 评论区 -->
			<view class="section">
				<text class="section-title">游客评论 ({{attraction.comments ? attraction.comments.length : 0}})</text>
				
				<!-- 评论列表 -->
				<view class="comment-list">
					<view v-if="!attraction.comments || attraction.comments.length === 0" class="no-comment">
						暂无评论，快来发表第一条评论吧！
					</view>
					
					<view class="comment-item" v-for="(item, index) in attraction.comments" :key="item.id || index">
						<view class="comment-user">
							<image class="comment-avatar" :src="item.user.avatarUrl || '/static/images/default-avatar.png'"></image>
							<view class="comment-info">
								<text class="comment-name">{{item.user.nickName || '游客'}}</text>
								<text class="comment-time">{{formatTime(item.createTime)}}</text>
							</view>
						</view>
						<text class="comment-content">{{item.content}}</text>
					</view>
				</view>
				
				<!-- 发表评论 -->
				<view class="comment-form">
					<input 
						class="comment-input" 
						:placeholder="userInfo ? '说点什么...' : '登录后发表评论'" 
						v-model="comment" 
						:disabled="!userInfo"
					/>
					<button 
						class="comment-submit" 
						:class="{'disabled': !userInfo || !comment}" 
						@click="submitComment" 
						:disabled="!userInfo || !comment">发送
					</button>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	// 静态景点数据
	const staticAttraction = {
		id: '1',
		name: '沙扒湾海滩',
		coverImage: '/static/图片.jpg',
		tags: ['海滩', '日落', '游泳'],
		rating: 4.8,
		visitCount: 5280,
		address: '广东省阳江市阳西县沙扒镇海滨路',
		openTime: '全天开放',
		price: '免费',
		likeCount: 328,
		description: '沙扒湾位于广东省阳江市阳西县沙扒镇，是中国最美八大海滩之一。这里沙质洁白细腻，海水清澈湛蓝，海岸线蜿蜒曲折，是休闲度假、观赏日落的绝佳去处。沙扒湾拥有16公里长的海岸线，沙滩宽阔平缓，海水清澈见底，是游泳、沙滩运动的理想场所。这里的日落景色尤为壮观，被誉为"东方夏威夷"。',
		latitude: 21.574,
		longitude: 111.779,
		images: [
			{ id: '101', url: '/static/图片.jpg' },
			{ id: '102', url: '/static/图片.jpg' },
			{ id: '103', url: '/static/图片.jpg' },
			{ id: '104', url: '/static/图片.jpg' }
		],
		comments: [
			{
				id: '1',
				user: {
					id: 'user1',
					nickName: '旅行达人',
					avatarUrl: '/static/images/default-avatar.png'
				},
				content: '沙扒湾真的太美了，沙滩很干净，海水也很清澈！特别是日落时分，景色美不胜收，值得一去！',
				createTime: new Date().getTime() - 86400000 // 一天前
			},
			{
				id: '2',
				user: {
					id: 'user2',
					nickName: '快乐游客',
					avatarUrl: '/static/images/default-avatar.png'
				},
				content: '第一次来沙扒湾，比想象中更美。这里的沙滩比很多地方都要细腻，海浪也很温和，适合带孩子来玩。',
				createTime: new Date().getTime() - 172800000 // 两天前
			}
		]
	};
	
	export default {
		data() {
			return {
				attractionId: null,
				attraction: null,
				isLoading: true,
				hasError: false,
				errorMsg: '',
				userInfo: null,
				isLiked: false,
				comment: ''
			}
		},
		onLoad(options) {
			if (options.id) {
				this.attractionId = options.id
				
				// 使用setTimeout模拟加载
				setTimeout(() => {
					this.loadAttraction();
					this.checkUserInfo();
				}, 500);
			} else {
				this.hasError = true
				this.errorMsg = '景点ID不存在'
				this.isLoading = false
			}
		},
		onShow() {
			// 检查用户信息是否更新
			this.checkUserInfo();
		},
		methods: {
			// 加载景点详情
			loadAttraction() {
				this.isLoading = true
				this.hasError = false
				
				// 模拟网络加载
				setTimeout(() => {
					// 使用静态数据
					this.attraction = JSON.parse(JSON.stringify(staticAttraction));
					this.isLoading = false;
					
					// 检查是否已点赞
					if (this.userInfo) {
						this.checkIfLiked();
					}
				}, 500);
			},
			
			// 检查用户信息
			checkUserInfo() {
				try {
					// 尝试从本地存储或全局状态获取用户信息
					const app = getApp();
					const userInfo = app.globalData?.userInfo;
					
					if (userInfo) {
						this.userInfo = userInfo;
						
						// 如果已加载景点信息，检查是否已点赞
						if (this.attraction) {
							this.checkIfLiked();
						}
					}
				} catch (e) {
					console.error('获取用户信息失败', e);
				}
			},
			
			// 检查是否已点赞
			checkIfLiked() {
				if (!this.userInfo || !this.attractionId) return;
				
				// 模拟检查点赞状态 - 随机模拟
				const isLiked = Math.random() > 0.5;
				this.isLiked = isLiked;
			},
			
			// 点赞/取消点赞
			toggleLike() {
				if (!this.userInfo) {
					this.goToLogin();
					return;
				}
				
				// 先进行乐观UI更新
				const originalLikeCount = this.attraction.likeCount || 0;
				this.attraction.likeCount = this.isLiked 
					? originalLikeCount - 1 
					: originalLikeCount + 1;
				
				this.isLiked = !this.isLiked;
				
				// 显示提示
				uni.showToast({
					title: this.isLiked ? '已点赞' : '已取消点赞',
					icon: 'success',
					duration: 1500
				});
			},
			
			// 提交评论
			submitComment() {
				if (!this.userInfo) {
					this.goToLogin();
					return;
				}
				
				if (!this.comment.trim()) {
					uni.showToast({
						title: '评论内容不能为空',
						icon: 'none'
					});
					return;
				}
				
				// 创建新评论
				const newComment = {
					id: Date.now().toString(),
					user: {
						id: this.userInfo.id || 'user' + Date.now(),
						nickName: this.userInfo.nickName || '游客',
						avatarUrl: this.userInfo.avatarUrl || '/static/images/default-avatar.png'
					},
					content: this.comment,
					createTime: new Date().getTime()
				};
				
				// 更新评论列表
				if (!this.attraction.comments) {
					this.attraction.comments = [];
				}
				this.attraction.comments.unshift(newComment);
				
				// 清空输入框
				this.comment = '';
				
				// 显示提示
				uni.showToast({
					title: '评论成功',
					icon: 'success'
				});
			},
			
			// 跳转到登录页
			goToLogin() {
				uni.showModal({
					title: '提示',
					content: '您需要登录后才能操作',
					confirmText: '去登录',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/index'
							});
						}
					}
				});
			},
			
			// 显示地图
			openLocation() {
				if (!this.attraction || !this.attraction.latitude || !this.attraction.longitude) {
					uni.showToast({
						title: '暂无位置信息',
						icon: 'none'
					});
					return;
				}
				
				uni.openLocation({
					latitude: parseFloat(this.attraction.latitude),
					longitude: parseFloat(this.attraction.longitude),
					name: this.attraction.name,
					address: this.attraction.address,
					scale: 18
				});
			},
			
			// 预览图片
			previewImage(current) {
				const urls = this.attraction.images.map(img => img.url);
				
				uni.previewImage({
					current: current,
					urls: urls
				});
			},
			
			// 重试加载
			retryLoading() {
				this.loadAttraction();
			},
			
			// 获取星星图片
			getStarImage(index) {
				const rating = this.attraction.rating || 0;
				if (index <= Math.floor(rating)) {
					return '/static/images/star-filled.png';
				} else if (index <= rating) {
					return '/static/images/star-half.png';
				} else {
					return '/static/images/star-empty.png';
				}
			},
			
			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return '刚刚';
				
				const now = new Date().getTime();
				const diff = now - timestamp;
				
				// 一分钟内
				if (diff < 60000) {
					return '刚刚';
				}
				
				// 一小时内
				if (diff < 3600000) {
					return Math.floor(diff / 60000) + '分钟前';
				}
				
				// 一天内
				if (diff < 86400000) {
					return Math.floor(diff / 3600000) + '小时前';
				}
				
				// 显示日期
				const date = new Date(timestamp);
				return `${date.getMonth() + 1}月${date.getDate()}日`;
			}
		},
		onShareAppMessage() {
			return {
				title: this.attraction ? this.attraction.name : '沙扒湾景点推荐',
				path: `/pages/attractions/detail?id=${this.attractionId}`,
				imageUrl: this.attraction && this.attraction.coverImage ? this.attraction.coverImage : ''
			}
		},
		onPullDownRefresh() {
			if (this.attractionId) {
				this.loadAttraction();
				
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 1000);
			} else {
				uni.stopPullDownRefresh();
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 120rpx;
	}
	
	.loading-container, .error-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}
	
	.loading-image, .error-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	.loading-text, .error-text {
		font-size: 28rpx;
		color: #666;
	}
	
	.retry-button {
		margin-top: 30rpx;
		font-size: 28rpx;
		padding: 16rpx 40rpx;
		background-color: #1296db;
		color: #fff;
		border-radius: 40rpx;
	}
	
	.header-image {
		width: 100%;
		height: 450rpx;
	}
	
	.header-image image {
		width: 100%;
		height: 100%;
	}
	
	.basic-info {
		padding: 30rpx;
		background-color: #fff;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}
	
	.tag {
		font-size: 24rpx;
		color: #1296db;
		background-color: #e6f4ff;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		margin-right: 12rpx;
		margin-bottom: 10rpx;
	}
	
	.rating {
		display: flex;
		align-items: center;
	}
	
	.stars {
		display: flex;
		margin-right: 20rpx;
	}
	
	.star-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 4rpx;
	}
	
	.rating-text {
		color: #ff9500;
		font-size: 28rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}
	
	.visit-count {
		color: #888;
		font-size: 24rpx;
	}
	
	.info-row {
		padding: 30rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		margin-top: 2rpx;
		position: relative;
	}
	
	.info-label {
		width: 150rpx;
		color: #666;
		font-size: 28rpx;
	}
	
	.info-content {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		padding-right: 60rpx;
	}
	
	.location-icon {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 30rpx;
	}
	
	.action-row {
		display: flex;
		background-color: #fff;
		padding: 20rpx 30rpx;
		margin-top: 20rpx;
	}
	
	.action-button {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #666;
		padding: 16rpx 0;
	}
	
	.action-button image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}
	
	.action-button.liked {
		color: #ff5a5f;
	}
	
	.action-button.share {
		background-color: transparent;
		border: none;
		color: #666;
		line-height: normal;
	}
	
	.section {
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: #fff;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.description {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}
	
	.image-gallery {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10rpx;
	}
	
	.gallery-item {
		width: calc(33.33% - 20rpx);
		margin: 10rpx;
		height: 200rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.gallery-item image {
		width: 100%;
		height: 100%;
	}
	
	.comment-list {
		margin-bottom: 30rpx;
	}
	
	.no-comment {
		color: #999;
		font-size: 28rpx;
		text-align: center;
		padding: 40rpx 0;
	}
	
	.comment-item {
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}
	
	.comment-user {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}
	
	.comment-avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}
	
	.comment-info {
		flex: 1;
	}
	
	.comment-name {
		font-size: 28rpx;
		color: #333;
		display: block;
	}
	
	.comment-time {
		font-size: 24rpx;
		color: #999;
	}
	
	.comment-content {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}
	
	.comment-form {
		display: flex;
		border-top: 1px solid #eee;
		padding-top: 30rpx;
	}
	
	.comment-input {
		flex: 1;
		height: 70rpx;
		background-color: #f5f5f5;
		border-radius: 35rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
	}
	
	.comment-submit {
		width: 140rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #1296db;
		color: #fff;
		font-size: 28rpx;
		border-radius: 35rpx;
		margin-left: 20rpx;
		padding: 0;
	}
	
	.comment-submit.disabled {
		background-color: #cccccc;
		color: #fff;
	}
</style> 